import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:imperius_insights/modules/projects/viewmodels/colors.dart';
import 'package:imperius_insights/modules/projects/widgets/project_item.dart';
import 'package:imperius_insights/modules/quality/pmo/widgets/makeIndicatable.dart';
import 'package:imperius_insights/modules/quality/pmo/widgets/qa_stats.dart';
import 'package:imperius_insights/portal/state/mobx/widget-state.dart';
import 'package:imperius_insights/portal/widgets/responsive-widget.dart';
import 'package:imperius_insights/treaty/dimensions.dart';
import 'package:imperius_insights/treaty/palette.dart';
import 'package:imperius_insights/treaty/strings.dart';
import 'package:table_calendar/table_calendar.dart';

import 'view_model.dart';
import '../../widgets/card_container.dart';

class Screen extends StatefulWidget {
  final String pmo;

  Screen({@required this.pmo});

  @override
  State<StatefulWidget> createState() {
    return ScreenState();
  }
}

class ScreenState extends MobXWidgetState<Screen, ViewModel> {
  @override
  ViewModel createStore() {
    return ViewModel(pmo: widget.pmo);
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      final isLandscape = ResponsiveWidget.isLandscape(context);
      final expandedFlex = isLandscape ? 1 : 0;
      final areaProjectInfo = Expanded(
        flex: expandedFlex,
        child: makeIndicatable(viewModel.project, viewModel.refresh,
            (context, indicator) {
          return FlowCard(
            position: isLandscape ? Position.Left : Position.Bottom,
            child: ProjectGlance(indicator.data,
                bottomPadding: 0,
                hideQualityLabel: true,
                onClicked: (p) => {},
                topPadding: 0),
          );
        }),
      );
      final areaQaStatsInfo = Expanded(
        flex: expandedFlex,
        child:
            makeIndicatable(viewModel.issuesClassification, viewModel.refresh,
                (context, indicator) {
          return FlowCard(
            position: Position.Middle,
            child: QaStats(
                viewModel.project.data, viewModel.issuesClassification.data),
          );
        }),
      );
      final areaCalendar = Expanded(
        flex: 0,
        child: FlowCard(
          position: isLandscape ? Position.Right : Position.Top,
          child: ConstrainedBox(
              constraints: BoxConstraints(
                  maxHeight: 450,
                  maxWidth: isLandscape ? 300 : constraints.maxWidth),
              child: Observer(
                builder: (_) {
                  return TableCalendar(
                    headerVisible: isLandscape,
                    headerStyle: isLandscape
                        ? HeaderStyle(
                            formatButtonVisible: false,
                            centerHeaderTitle: true,
                            decoration: BoxDecoration(color: palette.theme),
                            headerPadding: EdgeInsets.all(4),
                            headerMargin: EdgeInsets.only(bottom: 16),
                            titleTextStyle: TextStyle(
                                fontSize: fontDimensions.title,
                                color: Colors.white),
                            leftChevronIcon:
                                Icon(Icons.arrow_back_ios, color: Colors.white),
                            rightChevronIcon: Icon(Icons.arrow_forward_ios,
                                color: Colors.white))
                        : HeaderStyle(),
                    initialCalendarFormat: isLandscape
                        ? CalendarFormat.month
                        : CalendarFormat.twoWeeks,
                    locale: 'zh_CN',
                    calendarController: viewModel.calendarController,
                    calendarStyle: CalendarStyle(
                      markersPositionTop: 5,
                      holidayStyle: TextStyle(color: Colors.green),
                    ),
                    events: viewModel.calendarEvents,
                    builders: CalendarBuilders(
                        selectedDayBuilder: (context, date, events) {
                      return Center(
                        child: Text('${date.day}'),
                      );
                    }, todayDayBuilder: (context, date, events) {
                      return Center(
                        child: Text('${date.day}'),
                      );
                    }, singleMarkerBuilder: (context, date, event) {
                      return Opacity(
                          opacity: 0.3,
                          child: Container(
                              width: 30,
                              height: 30,
                              margin:
                                  const EdgeInsets.symmetric(horizontal: 0.3),
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                color: stagingToColor(viewModel.project.data
                                    .calcMilestoneStaging(date)),
                              )));
                    }),
                  );
                },
              )),
        ),
      );
      return Scaffold(
          appBar: AppBar(
            title: Text(Strings.toolbox_pmo_quality_title),
            backgroundColor: palette.theme,
          ),
          body: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                wrapChildren(
                  context,
                  isLandscape
                      ? [areaProjectInfo, areaQaStatsInfo, areaCalendar]
                      : [areaCalendar, areaProjectInfo, areaQaStatsInfo],
                ),
              ],
            ),
          ));
    });
  }

  Widget wrapChildren(BuildContext context, List<Widget> children) {
    final landscape = ResponsiveWidget.isLandscape(context);
    return landscape
        ? Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: children,
          )
        : Column(
            children: children,
          );
  }
}
